<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-cascades"></i> 投訴管理
              </el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <div class="handle-box"></div>
          <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
            <el-table-column prop="complaintValue" label="投訴內容"></el-table-column>
            <el-table-column prop="complaintReason" label="投訴原因"></el-table-column>
            <el-table-column prop="complaintDetail" label="投訴細節"></el-table-column>
            <el-table-column prop="complaintRecord" label="回覆內容"></el-table-column>
            <el-table-column prop="complaintTime" label="投訴時間"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" @click="handleReply(scope.$index, scope.row)">回覆</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>

      <!-- 回覆彈出框 -->
      <el-dialog title="回覆" :visible.sync="editVisible" width="30%">
          <el-form ref="form" :model="form" label-width="70px">
              <el-form-item label="內容">
                  <el-input v-model="form.complaintRecord"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="editVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import axios from '../../axios/index';

export default {
  name: 'complaintManagement',
  data() {
      return {
          query: {
              pageIndex: 1,
              pageSize: 10
          },
          tableData: [],
          multipleSelection: [],
          editVisible: false,
          pageTotal: 0,
          form: {},
          idx: -1
      };
  },
  created() {
      this.getData();
  },
  methods: {
      getData() {
        axios.get('/manager/complaint/get')
          .then(response => {
              const res = response;
              this.tableData = res.data.map(item => ({
                  ...item,
                  complaintTime: this.formatDate(item.complaintTime),
              }));
              this.pageTotal = res.data.length;
          })
          .catch(error => {
            console.error("获取数据失败: ", error);
          });
      },
      formatDate(dateString) {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      },
      handleReply(index, row) {
          this.idx = row.id;
          this.form = { ...row };
          this.editVisible = true;
      },
      saveEdit() {
          const params = {
              id: this.idx,
              complaintRecord: this.form.complaintRecord
          };
          axios.post('/manager/complaint/update', params)
            .then(response => {
              this.$message.success('回覆成功');
              this.getData(); // 刷新数据
              this.editVisible = false;
          })
          .catch(error => {
              console.error("回覆失败: ", error);
              this.editVisible = false;
          });
      },
      handlePageChange(val) {
          this.query.pageIndex = val;
          this.getData();
      }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
